import React from 'react'
import { Button, Form, Input, InputNumber, message, Modal, Switch, Table } from 'antd'
import { fetchPost } from '../../../utils/request'

const FormItem = Form.Item
const { TextArea } = Input

class Index extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      configList: [],
      configChangeList: [],
      visible: false
    }
  }

  componentWillMount () {
    this.getData()
  }

  getData () {
    // 获取数据  更改database
    fetchPost(`/dbConfig/businessConfig/list/${this.props.params.businessKey}`).then((res) => {
      if (res.code === 0) {
        this.setState({
          configList: this.modifyDataType(res.data.list),
          loading: false
        })
      } else {
        this.setState({
          loading: false
        })
        message.error(res.msg)
      }
    })
  }

  modifyDataType (data) {
    data.forEach(item => {
      if (item.componentType === 1) {
        item.value = item.value === 'true'
      }
    })
    return data
  }

  renderItem (item) {
    switch (item.componentType) {
      case 1:
        return (<Switch />)
      case 2:
        return (<InputNumber />)
      case 3:
        return (<TextArea autosize={{ minRows: 1, maxRows: 30 }} />)
    }
  }

  showModal () {
    this.props.form.validateFields(( error, values) => {
      let configChangeList = []
      this.state.configList.forEach(item => {
        if (item.value != values[item.id]) {
          configChangeList.push({
            id: item.id,
            comment: item.comment,
            oldValue: item.value,
            value: values[item.id]
          })
          this.setState({
            configChangeList: configChangeList,
            visible: true
          })
        }
      })
      if (Array.isArray(configChangeList) && configChangeList.length === 0) {
        message.error('Please submit after modification')
      }
    })
  }

  handleOk () {
    let params = []
    this.state.configChangeList.forEach(item => {
      params.push({
        id: item.id,
        value: item.value
      })
    })
    // 提交变动
    // 获取数据  更改database
    fetchPost('/dbConfig//businessConfig/modify', { params: params }).then((res) => {
      if (res.code === 0) {
        message.success('success')
        this.setState({
          visible: false,
          configChangeList: []
        }, () => {
          this.getData()
        })
      } else {
        message.error(res.msg)
      }
    })
    // 刷新页面
  }

  handleCancel () {
    this.props.form.resetFields()
    this.setState({
      visible: false,
      configChangeList: []
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 }
    }
    const columns = [{
      title: 'comment',
      dataIndex: 'comment',
      key: 'comment'
    }, {
      title: 'oldValue',
      dataIndex: 'oldValue',
      key: 'oldValue',
      render: (record) => {
        if (record === true || record === false) {
          return <Switch checked={record} />
        } else {
          return record
        }
      }
    }, {
      title: 'newValue',
      dataIndex: 'value',
      key: 'value',
      render: (record) => {
        if (record === true || record === false) {
          return <Switch checked={record} />
        } else {
          return record
        }
      }
    }]
    return (
      <div>
        <Form style={{ width: 800, margin: 50 }}>
          {this.state.configList.map(item => {
            return (
              <FormItem
                {...formItemLayout}
                label={item.comment}
              >
                {getFieldDecorator(item.id + '', {
                  initialValue: item.value,
                  valuePropName: item.componentType === 1 ? 'checked' : 'value'
                })(
                  this.renderItem(item)
                )}
              </FormItem>
            )
          })}
          <FormItem
            wrapperCol={{ span: 2, offset: 10 }}
          >
            <Button type='primary' onClick={() => this.showModal()}>Update</Button>
          </FormItem>
        </Form>
        <Modal
          title='Update'
          visible={this.state.visible}
          onOk={(e) => this.handleOk(e)}
          onCancel={(e) => this.handleCancel(e)}
        >
          <Table dataSource={this.state.configChangeList} columns={columns} pagination={false} />
        </Modal>

      </div>
    )
  }
}

export default Form.create()(Index)
